body {
  width: 350px;
}

#container {
  background-color: #FFF;
  border: 1px solid #CACACA;
  box-sizing: border-box;
  font-size: 14px;
  visibility: hidden;
}

#container.initialized {
  visibility: visible;
}

#container .dialogInput {
  font-size: 14px;
}

.header {
  background-color: #F4F4F4;
  border-bottom: 1px solid #CACACA;
}

#backButton {
  padding-left: 30px;
  padding-right: 20px;
  line-height: 49px;
  height: 49px;
  background-image: url('images/vault_4.0/Back.png');
  background-position: 20px center;
  background-repeat: no-repeat;
  font-size: 13px;
  cursor: pointer;
}

#backLabel {
  display: inline-block;
  float: left;
  min-width: 70px;
}

#groupLabel {
  padding-left: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  opacity: .5;
  box-sizing: border-box;
  text-align: right;
}

#groupLabel .textOverflowContainer,
#groupLabel .textTail {
  float: right;
}

#groupLabel .textTail {
  max-width: calc(100% - 25px);
}

#groupLabel > span {
  text-overflow: ellipsis;
  overflow: hidden;
}

#backButton:hover {
  background-color: #E2E2E2;
}

#searchContainer {
  padding: 20px;
}

#searchInput {
  font-style: italic;
}

.extensionMenuItem {
  line-height: 40px;
  height: 40px;
  cursor: pointer;
  display: block;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-left: 20px;
  text-decoration: none;
  color: #000;
}

.extensionMenuItem.none {
  cursor: default;
}

.extensionMenuItem.none:hover {
  background-color: transparent;
}

.iconList .extensionMenuItem {
  background-position: 20px center;
  background-repeat: no-repeat;
  padding-left: 50px;
}

.extensionMenuItem.hover {
  background-color: #F0F0F0;
  outline: none;
}

.extensionMenuItem.divider {
  border-top: 1px solid #CACACA;
}

#vaultMenuItem {
  background-image: url('images/vault_4.0/extension/Vault.png');
}

#sitesMenuItem {
  background-image: url('images/vault_4.0/extension/Sites.png');
}

#formFillsMenuItem {
  background-image: url('images/vault_4.0/extension/FormFill.png');
}

#generateMenuItem {
  background-image: url('images/vault_4.0/extension/Generate.png');
}

#notesMenuItem {
  background-image: url('images/vault_4.0/extension/Secure_Note.png');
}

#logoutMenuItem {
  background-image: url('images/vault_4.0/extension/Log_Out.png');
}

#specialOfferMenuItem{
  background-image: url('images/vault_4.0/extension/Gift.png');
  display: none;
}

#main {
  display: none;
  overflow: auto;
  /* Chrome's max popup height is 600px so this represents the max size without overflowing the popup (#container border: 2px, #searchContainer 71px) */
  max-height: 527px;
  position: relative;
}

.main #main {
  display: block;
}

#matchingSiteCounter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  line-height: 20px;
  height: 20px;
  font-size: 13px;
  margin: auto;
  border-radius: 4px;
  background-color: #D22D27;
  color: #FFF;
  padding: 0 2px 0 2px;
  margin-left: -2px;
  min-width: 15px;
  text-align: center;
}

.loading #items,
.loading #searchResults,
.loading #recentSites,
.loading #matchingSites {
  background-image: url('images/vault_4.0/Loading.gif');
  background-position: center center;
  background-repeat: no-repeat;
}

/*
* Only show these under certain conditions
*/
#debugconsole,
#applicationsMenuItem,
#encryptedExportMenuItem,
#wifiExportMenuItem,
#matchingSitesMenuItem {
  display: none;
}

.singleImportOption #importMenuItemMain .more {
  display: none;
}

/*
******* Groups *******
*/

.extensionMenuItem.group {
  padding-right: 30px;
}

.more {
  width: 6px;
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  background: url('images/vault_4.0/extension/More.png') center center no-repeat;
}

/*
******* Items *******
*/

.extensionMenuItem.item {
  line-height: normal;
  width: 100%;
  display: table;
  table-layout: fixed;
  padding: 0;
}

.itemIcon,
.extensionMenuItem.item > .itemInfoText,
.extensionMenuItem.hover .moreItem {
  vertical-align: middle;
  display: table-cell;
}

.itemInfoText p {
  text-overflow: ellipsis;
  overflow: hidden;
}

.extensionMenuItem.note .itemInfoText,
.extensionMenuItem.formFill .itemInfoText {
  padding-left: 10px;
}

.extensionMenuItem.group, .extensionMenuItem.item {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #DCDCDC;
}

#main .extensionMenuItem.item {
  border-width: 1px 0 0 0;
}

.extensionMenuItem.group.last, .extensionMenuItem.item.last  {
  margin-bottom: -1px;
}

.extensionMenuItem.item .bigIcon {
  height: 50%;
}

.extensionMenuItem.item img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.itemIcon {
  background-color: #FFF;
  height: 100%;
  vertical-align: top;
  width: 100px;
  position: relative;
}

.itemIconOverlay {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .06);
}

.extensionMenuItem.hover .itemIconOverlay {
  display: block;
}

.moreItem {
  width: 40px;
  background-image: url('images/vault_4.0/Edit.png');
  background-position: center center;
  background-repeat: no-repeat;
  display: none;
}

.moreItem.copyUsername {
  background-image: url('images/vault_4.0/Copy_Username.png');
}

.moreItem.copyPassword {
  background-image: url('images/vault_4.0/Copy_Password.png');
}

.moreItem:hover {
  background-color: #E2E2E2;
}

/*
******* Child Views *******
*/

#childViews {
  display: block;
}

.main #childViews {
  display: none;
}

#searchContainer {
  display: none;
}

.main #searchContainer, .search #searchContainer {
  display: block;
}

.search .header {
  display: none;
}

.childView {
  display: none;
  position: absolute;
  top: 51px;
  left: 1px;
  right: 1px;
  bottom: 50px;
  overflow: auto;
}

.sites #items,
.notes #items,
.formFills #items,
.applications #items {
  display: block;
}

#extensionDropdownGeneratePassword {
  bottom: 0;
}

.extensionDropdownGeneratePassword #extensionDropdownGeneratePassword {
  display: block;
}

#chooseProfileCreditCard {
  bottom: 0;
}

.chooseProfileCreditCard #chooseProfileCreditCard {
  display: block;
}

.tools #tools {
  display: block;
}

.advanced #advanced {
  display: block;
}

.search #mainMenu {
  display: none;
}

#searchResults {
  bottom: 0;
}

.search #searchResults {
  top: 72px;
  display: block;
}

.import #import {
  display: block;
}

.export #export {
  display: block;
}

.print #print {
  display: block;
}

.matchingSites #matchingSites {
  display: block;
}

.recentSites #recentSites {
  display: block;
}

.search #searchResults, .searchItem #searchResults {
  display: block;
}

.identities #identities {
  display: block;
}

/*
******* Footers *******
*/

#itemsFooter {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 0;
}

.footer {
  display: none;
  border-top: 1px solid #CACACA;
  height: 49px;
  line-height: 49px;
  padding-left: 20px;
  cursor: pointer;
  background-color: #F4F4F4;
}

.footer ul {
  margin-left: -20px;
}

.footer li {
  border-bottom: 1px solid #CACACA;
  padding-left: 20px;
}

.footer li:hover {
  background-color: #E2E2E2;
}

.footer li:last-child {
  border-bottom: none;
}

.sites #items {
  bottom: 100px;
}

#siteFooter {
  height: 99px;
}

.sites #siteFooter {
  display: block;
}

#formFillFooter {
  height: 199px;
}

.formFills #formFillFooter {
  display: block;
}

.formFills #items {
  bottom: 200px;
}

.notes #addNote {
  display: block;
}

.recentSites #clearMostRecent {
  display: block;
}

/*
******* Empty Views *******
*/

.emptyView {
  height: 200px;
  max-height: 80%;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.emptyViewIcon {
  height: 80%;
}

.emptyViewText {
  font-size: 22px;
  color: #d32d27;
}

/*
******* Policy Specific Layout *******
*
* Any policy listed here defines the behaviour
* when it is disabled.
*
*/

.no-feature-import #importMenuItemMain {
  display: none;
}

.feature-noexport #exportMenuItemMain {
  display: none;
}

.no-feature-show_notes #notesMenuItem {
  display: none;
}

.no-feature-show_formfills #formFillsMenuItem {
  display: none;
}

.feature-hideidentities #identitiesMenuItem {
  display: none;
}

.emptyPlaceholder {
  width: 268px;
  height: 135px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-style: italic;
  line-height: 135px;
  font-weight: 100;
}

.extensionSearchPlaceholder {
  background-image: url("images/vault_4.0/extension/Empty_Search.png");
  color: rgb(188, 198, 206);
  font-size: 24px;
  margin-top: 133px;
}
